<template>
  <div class="login-wapper" :style="loginsWarpper">
    <div class="login-right">
      <div>
        <img class="banyan-img" src="../assets/img/banyanLOGO.png" alt="" />
      </div>
      <div class="login-modal">
        <a-form-model
          style="margin-top: 3rem"
          class="loginFroms"
          ref="ruleForm"
          :model="loginForm"
          :rules="rules"
        >
          <!--    error为点击登录后的失败的说明        -->
          <a-form-model-item prop="emailAccount" :model="loginForm">
            <a-input
              :maxLength="128"
              autocomplete="autocomplete"
              size="large"
              allow-clear
              v-model="loginForm.emailAccount"
              placeholder="请输入邮箱"
            >
              <a-icon slot="prefix" type="user" />
            </a-input>
          </a-form-model-item>
          <a-form-model-item prop="password" style="margin-top: 1rem">
            <a-input-password
              size="large"
              allow-clear
              autocomplete="autocomplete"
              v-model="loginForm.password"
              placeholder="请输入密码"
              type="password"
            >
              <a-icon slot="prefix" type="lock" />
            </a-input-password>
          </a-form-model-item>
          <div style="display: flex; justify-content: space-between">
            <a-checkbox style="color: #141414" v-model="loginForm.remember"
              >记住密码</a-checkbox
            >
            <!-- <a-button type="link">忘记密码</a-button> -->
          </div>
          <a-form-item style="margin-top: 10px">
            <a-button
              class="login-btn"
              :loading="loading"
              :style="
                loginForm.isLook
                  ? 'background-image: linear-gradient(to right, #0debe9, #26f6c3);'
                  : 'background: #ccc;'
              "
              :disabled="!loginForm.isLook"
              size="large"
              htmlType="submit"
              type="primary"
              @click="onSubmit"
              >登录
            </a-button>
          </a-form-item>
          <div>
            <a-checkbox style="color: #141414" v-model="loginForm.isLook"
              >我已阅读并接受以下条款：<a
                href="javascript:;"
                @click="visible = true"
                >《软件授权许可》</a
              >
            </a-checkbox>
          </div>
        </a-form-model>
      </div>
    </div>

    <a-button-group class="language">
      <a-button
        @click="language = 'zh'"
        :type="language === 'zh' ? 'primary' : ''"
        >中</a-button
      >
      <a-button
        @click="language = 'En'"
        :type="language === 'En' ? 'primary' : ''"
      >
        En
      </a-button>
    </a-button-group>
    <div class="version-warpper">
      <div class="version">PDA版本号： V1.0.6</div>
      <div class="version">版本号： V2.2.0</div>
      <!-- <div>
        <a
          class="Record-n-varchar"
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51011302000148"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><img src="../assets/img/_20210901092156.png" style="float: left" />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
            "
          >
            川公网安备 51011302000148号
          </p>
        </a>
      </div>
      <div class="Record-n-varchars">
        备案号：<a style="color: #333333" href="https://beian.miit.gov.cn"
          >蜀ICP备2021020535号
        </a>
      </div> -->

      <div>
        <a
          class="Record-n-varchar"
          target="_blank"
          href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=51011302000160"
          style="
            display: inline-block;
            text-decoration: none;
            height: 20px;
            line-height: 20px;
          "
          ><img src="../assets/img/_20210901092156.png" style="float: left" />
          <p
            style="
              float: left;
              height: 20px;
              line-height: 20px;
              margin: 0px 0px 0px 5px;
            "
          >
            川公网安备 51011302000160号
          </p>
        </a>
      </div>
      <div class="Record-n-varchars">
        备案号：<a style="color: #333333" href="https://beian.miit.gov.cn"
          >蜀ICP备2021020535号-3
        </a>
      </div>
    </div>
    <!-- //软件授权协议 -->
    <a-modal v-model="visible" title="软件授权协议" width="60%">
      <template slot="footer">
        <a-button type="primary" @click="visible = false">已了解</a-button>
      </template>
      <div>
        <p>软件许可及服务协议</p>
        <p>【重要须知】</p>
        <p>
          【大榕树（成都）科技有限公司】（简称“大榕树公司”）在此特别提醒用户认真阅读、充分理解本《软件许可及服务协议》（简称“本协议”）。用户应认真阅读、充分理解本协议中各条款，特别涉及免除或者限制大榕树公司责任、争议解决和法律适用的条款。免除或者限制责任的条款将以粗体标识，您需要重点阅读并理解相关条款。请您审慎阅读并选择接受或不接受本协议（未成年人应在法定监护人陪同下阅读）。您的下载、安装、使用本软件以及账号获取和登录等行为将视为对本协议的接受，并同意接受本协议各项条款的约束。
        </p>
        <p>
          大榕树公司有权随时根据政府主管机关的政策及自身需求，修订本协议，更新后的协议条款将公布于官网或软件，自公布之日起生效（以最先公布的为准）。用户可重新下载安装本软件或网站查阅最新版协议条款。在大榕树修改本协议条款后，如果用户不接受修改后的条款，请立即停止使用大榕树公司提供的“大榕树（成都）科技有限公司”软件和服务，用户继续使用大榕树公司提供的“大榕树（成都）科技有限公司”软件和服务将被视为已接受了修改后的协议。
        </p>
        <p>一、总则</p>
        <p>
          1.1.
          本协议是您（也称“用户”）与大榕树公司及其运营合作单位（简称“合作单位”）之间关于用户使用“大榕树（成都）科技有限公司”软件（简称“本软件”）以及使用大榕树公司相关服务所订立的协议。
        </p>
        <p>
          1.2.
          本软件及服务是大榕树公司提供的安装在包括但不限于移动智能终端设备上的软件和服务，为使用该仓储系统终端的用户提供绑定、操作仓储系统产品等服务等。
        </p>
        <p>1.3. 本软件及服务的所有权和运营权均归大榕树公司所有。</p>
        <p>二、软件授权范围</p>
        <p>
          2.1.
          大榕树公司就本软件给予用户一项个人的、不可转让、不可转授权以及非独占性的许可。
        </p>
        <p>
          2.2.
          用户可以为非商业目的在单一台移动终端设备上安装、使用、显示、运行本软件。但用户不得为商业运营目的安装、使用、运行本软件，不可以对本软件或者本软件运行过程中释放到任何终端设备内存中的数据及本软件运行过程中客户端与服务器端的交互数据进行复制、更改、修改、挂接运行或创作任何衍生作品，形式包括但不限于使用插件、外挂或非经授权的第三方工具/服务接入本软件和相关系统。如果需要进行商业性的销售、复制和散发，例如软件预装和捆绑，必须获得大榕树公司的书面授权和许可。
        </p>
        <p>
          2.3.
          用户不得未经大榕树公司许可，将本软件在未经大榕树公司明示许可的提供给其它使用本仓储系统。
        </p>
        <p>
          2.4.
          用户可以为使用本软件及服务的目的复制本软件的一个副本，仅用作备份。备份副本必须包含原软件中含有的所有著作权信息。
        </p>
        <p>
          2.5.
          除本《协议》明示授权外，大榕树公司未授权给用户其他权利，若用户使用其他权利时须另外取得大榕树公司的书面同意。
        </p>
        <p>三、软件的获取、升级</p>
        <p>
          3.1.
          用户应当按照大榕树公司的指定网站（www.usbanyan.com）使用本软件产品。谨防在非指定网站下载本软件，以免移动终端设备感染能破坏用户数据和获取用户隐私信息的恶意程序。如果用户从未经大榕树公司授权的第三方获取本软件或与本软件名称相同的安装程序，大榕树公司无法保证该软件能够正常使用，并对因此给您造成的损失不予负责。
        </p>
        <p>
          3.2.
          用户必须选择与所安装终端设备相匹配的本软件版本。否则，由于软件与设备型号不相匹配所导致的任何软件问题、设备问题或损害，均由用户自行承担。
        </p>
        <p>
          3.3.
          为了改善用户体验、完善服务内容，大榕树公司有权不时地为您提供本软件替换、修改、升级版本，也有权为替换、修改或升级收取费用，但将收费提前征得您的同意。本软件为用户默认开通“升级提示”功能，视用户使用的软件版本差异，大榕树公司提供给用户自行选择是否需要开通此功能。软件新版本发布后，大榕树公司不保证旧版本软件的继续可用。
        </p>
        <p>四、使用规范</p>
        <p>
          4.1.
          在遵守法律前提下，用户可依本《协议》使用本软件及服务，用户不得实施如下行为：
        </p>
        <p>
          4.1.1.
          删除本软件及其他副本上一切关于版权的信息，以及修改、删除或避开本软件为保护知识产权而设置的技术措施；
        </p>
        <p>
          4.1.2.
          对本软件进行反向工程，如反汇编、反编译或者其他试图获得本软件的源代码；
        </p>
        <p>
          4.1.3.
          通过修改或伪造软件运行中的指令、数据，增加、删减、变动软件的功能或运行效果，或者将用于上述用途的软件、方法进行运营或向公众传播，无论这些行为是否为商业目的；
        </p>
        <p>
          4.1.4.
          使用本软件进行任何危害网络安全的行为，包括但不限于：使用未经许可的数据或进入未经许可的服务器/账户；未经允许进入公众网络或者他人操作系统并删除、修改、增加存储信息；未经许可企图探查、扫描、测试本软件的系统或网络的弱点或其它实施破坏网络安全的行为；
          企图干涉、破坏本软件系统或网站的正常运行，故意传播恶意程序或病毒以及其他破坏干扰正常网络信息服务的行为；伪造TCP/IP数据包名称或部分名称；
        </p>
        <p>
          4.1.5.
          用户通过非大榕树公司开发、授权或认可的第三方兼容软件、系统登录或使用本软件及服务，或制作、发布、传播上述工具；
        </p>
        <p>
          4.1.6.
          未经大榕树公司书面同意，用户对软件及其中的信息擅自实施包括但不限于下列行为：使用、出租、出借、复制、修改、链接、转载、汇编、发表、出版，建立镜像站点、擅自借助本软件发展与之有关的衍生产品、作品、服务、插件、外挂、兼容、互联等；
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.1.7. 利用本软件发表、传送、传播、储存违反当地法律法规的内容；
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.1.8.
            利用本软件发表、传送、传播、储存侵害他人知识产权、商业秘密等合法权利的内容；
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.1.9. 利用本软件批量发表、传送、传播广告信息及垃圾信息；
          </span>
        </p>
        <p>
          4.1.10.其他以任何不合法的方式、为任何不合法的目的、或以任何与本协议许可使用不一致的方式使用本软件和大榕树公司提供的其他服务；
        </p>
        <p>4.2. 信息发布规范</p>
        <p>
          4.2.1．您可使用本软件发表属于您原创或您有权发表的观点看法、数据、文字、信息、用户名、图片、照片、个人信息、音频、视频文件、链接等信息内容。您必须保证：您拥有您所上传信息内容的知识产权或已获得合法授权，您使用本软件及服务的任何行为未侵犯任何第三方之合法权益。
        </p>
        <p>4.2.2．您在使用本软件时需遵守当地法律法规的要求。</p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.2.3．您在使用本软件时不得利用本软件从事以下行为，包括但不限于：
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.2.3.1.制作、复制、发布、传播、储存违反当地法律法规的内容；
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.2.3.2.发布、传送、传播、储存侵害他人名誉权、肖像权、知识产权、商业秘密等合法权利的内容；
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.2.3.3.虚构事实、隐瞒真相以误导、欺骗他人；
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.2.3.4.发表、传送、传播广告信息及垃圾信息；
          </span>
        </p>
        <p>
          <span style="color: red; border-bottom: 1px solid red">
            4.2.3.5.从事其他违反当地法律法规的行为。
          </span>
        </p>
        <p>
          4.2.4.
          未经大榕树公司许可，您不得在本软件中进行任何诸如发布广告、销售商品的商业行为。
        </p>
        <p>4.3.您理解并同意：</p>
        <p>
          4.3.1.
          大榕树公司会对用户是否涉嫌违反上述使用规范做出认定，并根据认定结果中止、终止对您的使用许可或采取其他依本约定可采取的限制措施；
        </p>
        <p>
          4.3.2.
          对于用户使用许可软件时发布的涉嫌违法或涉嫌侵犯他人合法权利或违反本协议的信息，大榕树公司会直接终止合作并追诉其法律责任；
        </p>
        <p>
          4.3.3.
          对于用户违反上述使用规范的行为对第三方造成损害的，您需要以自己的名义独立承担法律责任，并应确保大榕树公司免于因此产生损失或增加费用；
        </p>
        <p>
          4.3.4．若用户违反有关法律规定或协议约定，使大榕树公司遭受损失，或受到第三方的索赔，或受到行政管理机关的处罚，用户应当赔偿大榕树公司因此造成的损失和（或）发生的费用，包括合理的律师费、调查取证费用。
        </p>
        <p>五、服务风险及免责声明</p>
        <p>
          5.1.
          用户必须自行配备移动终端设备上网和使用电信增值业务所需的设备，自行负担个人移动终端设备上网或第三方（包括但不限于电信或移动通信提供商）收取的通讯费、信息费等有关费用。如涉及电信增值服务的，我们建议您与您的电信增值服务提供商确认相关的费用问题。
        </p>
        <p>
          5.2.
          用户因第三方如通讯线路故障、技术问题、网络、移动终端设备故障、系统不稳定性及其他各种不可抗力原因而遭受的一切损失，大榕树公司及合作单位不承担责任。
        </p>
        <p>
          5.3.
          本软件同大多数互联网软件一样，受包括但不限于用户原因、网络服务质量、社会环境等因素的差异影响，可能受到各种安全问题的侵扰，如他人利用用户的资料，造成现实生活中的骚扰；用户下载安装的其它软件或访问的其他网站中含有“特洛伊木马”等病毒，威胁到用户的终端设备信息和数据的安全，继而影响本软件的正常使用等等。用户应加强信息安全及使用者资料的保护意识，要注意加强密码保护，以免遭致损失和骚扰。
        </p>
        <p>
          5.4.
          因用户使用本软件或要求大榕树公司提供特定服务时，本软件可能会调用第三方系统或第三方软件支持用户的使用或访问，使用或访问的结果由该第三方提供，大榕树公司不保证通过第三方系统或第三方软件支持实现的结果的安全性、准确性、有效性及其他不确定的风险，由此若引发的任何争议及损害，大榕树（成都）科技有限公司不承担任何责任。
        </p>
        <p>
          5.5.
          大榕树公司特别提请用户注意：为了保障公司业务发展和调整的自主权，大榕树公司拥有随时修改或中断服务而不需通知用户的权利，行使修改或中断服务的权利不需对用户或任何第三方负责。
        </p>
        <p>
          5.6.
          除法律法规有明确规定外，大榕树公司将尽最大努力确保软件及其所涉及的技术及信息安全、有效、准确、可靠，但受限于现有技术，用户理解大榕树公司不能对此进行担保。
        </p>
        <p>
          5.7.
          由于用户因下述任一情况所引起或与此有关的人身伤害或附带的、间接的经济损害赔偿，包括但不限于利润损失、资料损失、业务中断的损害赔偿或其他商业损害赔偿或损失，需由用户自行承担：
        </p>
        <p>5.7.1.使用或未能使用许可软件；</p>
        <p>5.7.2.第三方未经许可的使用软件或更改用户的数据；</p>
        <p>5.7.3.用户使用软件进行的行为产生的费用及损失；</p>
        <p>5.7.4.用户对软件的误解；</p>
        <p>5.7.5.非因大榕树公司的原因引起的与软件有关的其他损失。</p>
        <p>
          5.8.
          用户与其他使用软件的用户之间通过软件进行的行为，因您受误导或欺骗而导致或可能导致的任何人身或经济上的伤害或损失，均由过错方依法承担所有责任。
        </p>
        <p>
          5.9
          用户使用本软件期间如涉及需使用其他第三人（包括第三方组织或公司）任何影像、图片、名称等信息的，应当主动征得其他第三人的同意或授权。用户通过本软件直接使用或上传的全部设计第三人个人信息的，大榕树公司有权认为该等行为已经获得第三人充分的授权，由此不会产生任何侵权责任。如果产生争议，大榕树公司对此不承担任何责任。
        </p>
        <p>六、知识产权声明</p>
        <p>
          6.1.
          大榕树公司是本软件的知识产权权利人。本软件的一切著作权、商标权、专利权、商业秘密等知识产权，以及与本软件相关的所有信息内容（包括但不限于文字、图片、音频、视频、图表、界面设计、版面框架、有关数据或电子文档等）均受您所在当地法律法规和相应的国际条约保护，大榕树公司享有上述知识产权。
        </p>
        <p>
          6.2
          未经大榕树公司书面同意，用户不得为任何商业或非商业目的自行或许可任何第三方实施、利用、转让上述知识产权，大榕树公司保留追究上述行为法律责任的权利。
        </p>
        <p>七、协议变更</p>
        <p>
          7.1.
          大榕树公司有权在必要时修改本协议条款，协议条款一旦发生变动，将会在相关页面上公布修改后的协议条款。如果不同意所改动的内容，用户应主动取消此项服务。如果用户继续使用服务，则视为接受协议条款的变动。
        </p>
        <p>
          7.2.
          大榕树公司和合作公司有权按需要修改或变更所提供的收费服务、收费标准、收费方式、服务费及服务条款。在提供服务时，大榕树公司可能现在或日后对部分服务的用户开始收取一定的费用如用户拒绝支付该等费用，则不能在收费开始后继续使用相关的服务。大榕树公司和合作公司将尽最大努力通过电邮或其他方式通知用户有关的修改或变更。
        </p>
        <p>八、适用法律及争议解决</p>
        <p>
          8.1.
          本协议之效力、解释、变更、执行与争议解决均适用中华人民共和国大陆地区法律，如无相关法律规定的，则参照使用国际商业惯例和/或商业惯例。
        </p>
        <p>
          8.2.
          本协议包含了您使用本软件需遵守的一般性规范，您在使用本软件时还需遵守适用于该平台的特殊性规范（如有）。一般性规范如与特殊性规范不一致或有冲突，则特殊性规范具有优先效力。
        </p>
        <p>8.3本协议的签订地是成都市青白江区清泉大道二段6668号附699号。</p>
        <p>
          8.4．用户和大榕树限公司一致同意凡因本服务所产生的纠纷，双方应协商解决；协商不成任何一方可提交本协议签订地有管辖权的法院诉讼解决。
        </p>
        <p>九、其他</p>
        <p>
          9.1.
          用户在使用本软件某一特定服务时，该服务可能会另有单独的协议、相关业务规则等（简称“单独协议”），您在使用该项服务前请阅读并同意相关的单独协议。
        </p>
        <p>9.2. 本协议生效时间为2021年05月01日。</p>
        <p>
          9.3.
          本协议所有条款的标题仅为阅读方便，本身并无实际涵义，不能作为本协议涵义解释的依据。
        </p>
        <p>
          9.4.
          本协议条款无论因何种原因部分无效或不可执行，其余条款仍有效，对双方具有约束力。
        </p>
        <p>
          9.5.为了向您完整地提供我们的服务，我们会要求您提供服务所必需的个人信息。您有权选择禁止我们收集或拒绝提供相应的个人信息，但是我们需要提醒您，如果您不提供个人信息，我们可能无法向您提供我们的产品或服务。
          我们将收集以下各类信息（无论其是否为个人信息）：设备相关信息、例如MAC
          地址、设备制造商信息和型号名称等；用户在使用产品期间的操作行为等产品功能使用信息。
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script>
// let Base64 = require("js-base64").Base64;
import { login_api } from "../apis/login.js";
import { resetRouter } from "../router";
export default {
  created() {
    if (this.loginForm.remember) {
      this.loginForm.emailAccount = localStorage.getItem("login");
      this.loginForm.password = localStorage.getItem("pwd");
    }
    if (!localStorage.getItem("login")) {
      this.loginForm.remember = false;
    }
  },
  data() {
    return {
      language: "zh",
      visible: false,
      loading: false,
      //背景图设置
      loginsWarpper: {
        backgroundImage:
          "url(" + require("../assets/img/20210927141203.png") + ")",
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      },
      loginForm: {
        remember: true,
        emailAccount: "",
        password: "",
        isLook: true,
      },
      rules: {
        emailAccount: [
          { required: true, message: "请输入用户名", trigger: "change" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    onSubmit() {
      this.loading = true;
      if (this.loginForm.remember) {
        this.loginForm.remember = true;
        localStorage.setItem("login", this.loginForm.emailAccount);
        localStorage.setItem("pwd", this.loginForm.password);
      } else {
        this.loginForm.remember = false;
        localStorage.clear("login");
        localStorage.clear("pwd");
      }
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          setTimeout(async () => {
            let { code, responseBody } = await login_api(this.loginForm);
            if (code == "10000") {
              sessionStorage.setItem("tenantId", responseBody.user.tenantId);
              sessionStorage.setItem("userId", responseBody.user.id);
              sessionStorage.setItem("tk", responseBody.token);
              sessionStorage.setItem("username", responseBody.user.nickName);
              sessionStorage.setItem("terminal", responseBody.user.terminal);
              sessionStorage.setItem("accType", responseBody.user.type);
              sessionStorage.setItem(
                "tagPath",
                responseBody.user.pcpermissions[0].permissionRedirect
              );
              this.$store.commit("MENUSLIST", responseBody.user.pcpermissions);
              // 调用动态路由过滤方法
              resetRouter(); // 重置路由表
              sessionStorage.setItem(
                "realRouter",
                JSON.stringify(this.$store.getters.getRealMenus)
              );
              // console.log(this.$store.getters.getRealMenus);
              this.$store.getters.getRealMenus.forEach((item) => {
                this.$router.addRoute(item);
              });
              // 存入真实路由
              let tags = [
                {
                  path: responseBody.user.pcpermissions[0].permissionRedirect,
                  label: "首页",
                  name: responseBody.user.pcpermissions[0].permissionRedirect,
                  closable: false,
                },
              ];
              sessionStorage.setItem("tags", JSON.stringify(tags));
              sessionStorage.setItem(
                "activePath",
                responseBody.user.pcpermissions[0].permissionRedirect
              );
              this.$router.push(
                responseBody.user.pcpermissions[0].permissionRedirect
              );
              this.loading = false;
            } else {
              this.loading = false;
            }
          }, 1000);
        } else {
          this.$message.error("账号密码不能为空");
          this.loading = false;
          return false;
        }
      });
    },
    // 组装路由树
    // resetRouters(oneData, childrenData) {
    //   let treeRouter = [];
    //   treeRouter = oneData;
    //   treeRouter.forEach((item) => {
    //     childrenData.forEach((v) => {
    //       if (item.id === v.parentId) {
    //         item.children.push(v);
    //       }
    //     });
    //   });
    //   return treeRouter;
    // },
  },
};
</script>

<style lang="less" scoped>
.login-wapper {
  width: 100%;
  height: 100%;
  /deep/.login-right {
    display: flex;
    flex-direction: column;
    width: 27rem;
    height: 30rem;
    // background: #ccc;
    position: absolute;
    right: 16%;
    top: 50%;
    transform: translate(0%, -50%);
    .banyan-img {
      width: 500px !important;
      transform: translate(-7%, 30%);
    }
  }
  .login-modal {
    .login-btn {
      width: 100%;
      margin-top: 24px;
      border: none;
    }
  }
  .language {
    position: absolute;
    right: 100px;
    top: 20px;
    .ant-btn-primary {
      background: #27fac2;
      border: 1px solid #27fac2;
    }
    .ant-btn-group .ant-btn-primary:last-child:not(:first-child),
    .ant-btn-group .ant-btn-primary + .ant-btn-primary {
      border-left-color: #27fac2;
    }
  }
  .version-warpper {
    position: absolute;
    bottom: 20px;
    // width:;
    display: flex;
    font-weight: 600;
    justify-content: space-around;
    color: #333333;
    font-size: 16.5px;
    div {
      margin: 0 5rem;
    }
    .Record-n-varchar {
      color: #333333;
    }
  }
}
</style>
